<template>
	<view v-if="shenheStatus == 0" class="fenxiao">
		<view class="nav" :style="{
        paddingTop: statusBarHeight + 'px',
        background: `rgba(0,0,0,${opacity})`
      }">
			<view class="nav-head">
				<view class="goback" @click="$utils.goBack()">
					<image v-if="asyncImgs" :src="asyncImgs.common.back" mode="widthFix" ></image>
				</view>

				<view class="title">{{ info_data? info_data.wx_title : '分销中心'}}</view>
			</view>
		</view>

		<image v-if="asyncImgs" :src="asyncImgs.sharer.fenxiao_bg" mode="widthFix" class="header-bg">
		</image>

		<view class="content">
			<view class="content-header">
				<template v-if="user_info">
					<image :src="user_info.avatar_url" mode="aspectFill" />
					<view class="name">
						{{ user_info.nickname }}
					</view>
				</template>
				<template v-else >
					<image @click="$utils.isLogin()" :src="stores.default_user_info.default_user_pic" mode="aspectFill" />
					<view @click="$utils.isLogin()" class="name">登录</view>
				</template>
				<view>{{ info_data.level_name }}</view>
			</view>

			<view class="content-info">
				<view class="hd">
					<view class="let">
		
					</view>
					<view class="rig" @click="onClickUrl('/user/share-qrcode/share-qrcode')">
						<i class="iconfont icon-discounts-fill"></i>
						<view class="test">赚佣金</view>
						<i class="iconfont icon-arrow-down-filling"></i>
					</view>
				</view>

				<view class="bd">
					<view class="bd-con">
						<view class="list">
							<view class="item">
								<view class="tit">可提现（元）</view>
								<view class="price">
									{{ info_data.price && info_data.price.price | priceFilter }}
								</view>
							</view>
							<view class="item" @click="$utils.toUrl('/user/cash/cash?index=3')">
								<view class="tit">已提现（元）</view>
								<view class="price">
									{{
                    info_data.price && info_data.price.cash_price | priceFilter
                  }}
								</view>
							</view>
							<view class="item">
								<view class="tit">未结算（元）</view>
								<view class="price">{{
                  info_data.order_money_un | priceFilter
                }}</view>
							</view>
						</view>

						<view class="numList">
							<view class="item" @click="$utils.toUrl('/user/share-team/share-team')">
								<image v-if="asyncImgs" :src="asyncImgs.sharer.fenxiao_icon1" mode="aspectFill" />
								<view class="con">
									<view class="tit">团队人数（人）</view>
									<view class="num">{{ info_data.team_count }}</view>
								</view>
							</view>
							<view class="line"></view>
							<view class="item" @click="$utils.toUrl('/user/share/commission-details')">
								<image v-if="asyncImgs" :src="asyncImgs.sharer.fenxiao_icon2" mode="aspectFill" />
								<view class="con">
									<view class="tit">累计佣金（元）</view>
									<view class="num" v-if="info_data.price">{{
                    info_data.price.total_price | priceFilter
                  }}</view>
								</view>
							</view>
						</view>

						<view class="btn">
							<view class="item" @click="onClickUrl('/user/shop/cash?is_share_recharge=1')">账户提现</view>
							<view class="line"></view>
							<view class="item" @click="onClickUrl('/user/share-qrcode/share-qrcode')">分享赚佣金</view>
						</view>
					</view>
				</view>
			</view>

			<view class="order mt m-box">
				<view class="m-tit">订单统计</view>

				<view class="list">
					<view class="item" @click="onClickUrl('/user/share-order/share-order')">
						<view class="subtit">分销订单
							<text>（件）<i class="iconfont icon-arrow-right"></i></text>
						</view>
						<view class="num">{{ info_data.order_count }}</view>
					</view>
					<view class="item" v-if="recharge_count"
						@click="onClickUrl('/user/share-recharge-order/recharge-order')">
						<view class="subtit">充值订单
							<text>（件）<i class="iconfont icon-arrow-right"></i></text>
						</view>
						<view class="num">{{recharge_count }}</view>
					</view>
					<view class="item" @click="onClickUrl('/user/share-order/share')">
						<view class="subtit">未结算订单
							<text>（件）<i class="iconfont icon-arrow-right"></i></text>
						</view>
						<view class="num">{{ info_data.share_order_count }}</view>
					</view>
					<view class="item" v-if="yinbao" @click="onClickUrl('/user/share-order/share-order?type=1')">
						<view class="subtit">银豹订单
							<text>（件）<i class="iconfont icon-arrow-right"></i></text>
						</view>
						<view class="num">{{ info_data.order_count_yinbao }}</view>
					</view>

					<view class="item" @click="onClickUrl('/user/share-order/video')">
						<view class="subtit">短视频带货订单
							<text>（件）<i class="iconfont icon-arrow-right"></i></text>
						</view>
						<view class="num">{{ video_share_order_count }}</view>
					</view>
				</view>
			</view>

			<view class="daiban mt" v-if="list_wait.length">
				<view class="hd">
					<view class="m-tit">
						<image :src="asyncImgs.sharer.fenxiao_icon3" mode="widthFix"></image>
						待办
					</view>
				</view>
				<view class="bd m-box">
					<view class="item">
						<view class="let">
							<view class="m-tit">绑定分享员</view>
							<view class="des">还未绑定分享员，绑定享视频号分销佣金</view>
						</view>
					</view>

					<view class="item" v-for="item of list_wait" :key="item.id">
						<view class="let">
							<view class="m-tit">{{ item.username }}</view>
							<!-- <view class="des">还未绑定分享员，绑定享视频号分销佣金</view> -->
						</view>
						<view class="rig">
							<view class="btn" @click="
                  $utils.toUrl(
                    `/videoNumber/bind/index?sharer_id=${item.id}&wx_username=${item.username}`
                  )
                ">去绑定</view>
						</view>
					</view>
				</view>
			</view>

			<view class="mt m-box" v-if="list.length">
				<view class="m-tit">我的小店</view>

				<view class="des mt" v-for="item of list" :key="item.id">{{
          item.mini_nickname + " " + item.nickname
        }}</view>
			</view>
		</view>

		<u-popup v-model="notListPop" mode="center" :maskCloseAble="false" border-radius="24">
			<view class="notListPop">
				<view class="title">购买任意商品，成为分销商</view>

				<scroll-view scroll-y style="max-height: 500rpx" v-if="notListPic.length">
					<view class="item" :key="i" v-for="(citem, i) of notListPic" @click="select(i)">
						<checkbox :checked="citem.checked"></checkbox>

						<view class="img">
							<image class="item-gooddetails-left" :src="citem.cover_pic" mode="aspectFit"></image>
						</view>

						<view class="txt">
							<view class="name">{{ citem.name }}</view>

							<view class="itemFd">
								<view class="price">
									¥
									<text>{{ citem.price | integer }}</text>
									{{ citem.price | decimals }}
								</view>
								<view class="num">x1</view>
							</view>
						</view>
					</view>
				</scroll-view>

				<view class="btn">
					<view @click="onClickShareBack">返回</view>
					<view class="on" @click="submitPay">确认购买</view>
				</view>
			</view>
		</u-popup>
	</view>
	<Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
	import Shenhe from "@/components/shenhe/shenhe";
	import shareApi from "@/api/share.js";
	import {
		userSharerList
	} from "@/api/videoShop";

	export default {
		components: {
			Shenhe
		},
		data() {
			return {
				loading: false,
				show_modal: false,
				user_info: {},
				share_setting: {},
				info_data: {},
				yinbao: 0,
				recharge_count: 0,

				notListPop: false,
				notListPic: [],

				list: [],
				list_wait: [],
				video_share_order_count: "0",
				wx_title: ""
			};
		},
		filters: {
			priceFilter(val) {
				if (!val || val == 0) {
					val = 0;
				} else {
					val = val - 0;
				}
				return val.toFixed(2);
			},
			integer(data) {
				let end = data.indexOf(".");
				if (end !== -1) {
					data = data.substr(0, end);
				}
				return data;
			},
			decimals(data) {
				let end = data.indexOf(".");
				data = data.substr(end, 3);
				if (end === -1) {
					data = "";
				}
				return data;
			}
		},

		async onLoad() {
			uni.setNavigationBarTitle({
				title: this.$t("title.share")
			});
			let userInfo = uni.getStorageSync("userInfo");
			this.user_info = userInfo;
		},
		onShow() {
			setTimeout(() => {
				try {
					this.useFoot = this.$utils.useFoot(this.controls);
				} catch (e) {}
			}, 500);
			this.checkUser();
			this.userSharerList();
		},
		methods: {
			onClickShareBack() {
				this.notListPop = false;
				this.$utils.goBack();
			},

			async userSharerList() {
				const res = await userSharerList();
				if (!res.code) {
					let {
						list,
						list_wait
					} = res.data;
					this.list = list;
					this.list_wait = list_wait;
				}
			},

			checkUser() {
				shareApi.getInfo({}).then((res) => {
					if (res.code == 0) {
						//不是分销商
						if (res.not_is_distributor) {
							uni.showModal({
								content: res.msg,
								success() {
									uni.redirectTo({
										url: "/user/add-share/index"
									});
								}
							});
							return;
						}

						this.info_data = res.data;
					}
					if (res.code == 1) {
						let userInfo = uni.getStorageSync("userInfo");
						userInfo.is_distributor = 0;
						this.user_info = userInfo;
						uni.setStorageSync("userInfo", userInfo);
					}
					this.loadData();
				});
			},

			select(index) {
				let list = JSON.parse(JSON.stringify(this.notListPic));

				list.forEach((el, i) => {
					if (index === i) {
						el.checked = true;
					} else {
						el.checked = false;
					}
				});

				this.notListPic = list;
			},

			submitPay() {
				let item = this.notListPic.find((el) => el.checked);
				if (item) {
					uni.navigateTo({
						url: `/goods/goods/goods?id=${item.id}`
					});
					return;
				}

				uni.showToast({
					title: "至少选择一个商品",
					icon: "none"
				});
			},

			loadData() {
				shareApi.getShareSetting({}).then((res) => {
					if (res.code == 0) {
						uni.setStorageSync("shareSetting", res.data);

						this.yinbao = res.data.yinbao;
						this.video_share_order_count = res.data.video_share_order_count;
						this.recharge_count = res.data.recharge_count;
						this.share_setting = res.data;

						if (
							res.data.share_condition === 2 &&
							res.data.share_goods_status > 0 &&
							res.data.share_goods
						) {
							this.notListPop = true;

							let list = res.data.share_goods || [];
							list.forEach((el) => {
								el.checked = false;
							});
							this.notListPic = list;
							return;
						}

						if (
							this.share_setting.level > 0 &&
							this.user_info.is_distributor != 1
						) {
							if (this.share_setting.share_condition == 1) {
								uni.redirectTo({
									url: "/user/add-share/index"
								});
							} else {
								(this.share_setting.share_condition != 0 &&
									this.share_setting.share_condition != 2) ||
								(this.user_info.is_distributor == 0 ?
									uni.redirectTo({
										url: "/user/add-share/index"
									}) :
									(this.show_modal = true));
							}
						} else {
							this.loading = true;
						}
					}
				});
			},

			onClickUrl(url) {
				this.$utils.toUrl(url, "navigate");
			}
		}
	};
</script>

<style lang="scss" scoped>
	.fenxiao {
		min-height: 100vh;
		background: #f2f2f2;
		position: relative;

		.header {
			position: relative;
			z-index: 1;
			color: #fff;
			margin: 0px auto 40rpx;
			width: 678rpx;
			height: 292rpx;
			background: #ffffff;
			box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.03);
			border-radius: 20rpx;
			padding: 48rpx 40rpx 44rpx;

			.header-top {
				.left {
					width: 0;
					flex: 1;

					>image {
						width: 72rpx;
						height: 72rpx;
						background: #f1f1f1;
						border: 2rpx solid #ffffff;
						border-radius: 120rpx;
					}

					.user-info {
						margin-left: 12rpx;

						>view:nth-child(1) {
							line-height: 44rpx;
							font-size: 32rpx;
							font-weight: 600;
							color: #262626;
						}

						>view:nth-child(2) {
							line-height: 32rpx;
							font-size: 22rpx;
							font-weight: 400;
							color: #262626;
						}
					}
				}

				.right {
					font-size: 24rpx;
					font-weight: 600;
					color: #f0250e;

					.iconfont {
						font-weight: 400;
						color: #f0250e;
					}
				}
			}

			.header-bottom {
				margin-top: 58rpx;
				color: #262626;

				>view:nth-child(1) {
					flex: 1;
					width: 0;

					>text:nth-child(1) {
						font-size: 22rpx;
					}

					>text:nth-child(2) {
						font-size: 48rpx;
						font-weight: 600;
						margin-left: 10rpx;
					}

					>text:nth-child(3) {
						font-size: 36rpx;
					}
				}

				.tixian-bt {
					width: 146rpx;
					line-height: 62rpx;
					text-align: center;
					border-radius: 120rpx;
					font-size: 28rpx;
					color: #ffffff;
					background: #f0250e;
				}
			}
		}

		.bottom {
			.yongjin {
				margin: 0 auto 24rpx;
				width: 678rpx;
				height: 166rpx;
				background: #ffffff;
				border: 2rpx solid #f1f1f1;
				opacity: 1;
				border-radius: 20rpx;
				padding: 28rpx;

				>view:nth-child(1) {
					margin-bottom: 4rpx;
					font-size: 24rpx;
					color: #8c8c8c;

					>text {
						margin-right: 8rpx;
						font-weight: 600;
						font-size: 28rpx;
						color: #262626;
					}
				}

				>view:nth-child(2) {
					line-height: 66rpx;
					font-size: 48rpx;
					font-weight: 600;
					color: #262626;
				}
			}

			.pair {
				width: 678rpx;
				margin: 0 auto 24rpx;
				display: flex;
				flex-wrap: wrap;

				>.item {
					padding: 28rpx;
					flex-shrink: 0;
					width: 326rpx;
					height: 166rpx;
					background: #ffffff;
					border: 2rpx solid #f1f1f1;
					border-radius: 20rpx;
					margin-bottom: 18rpx;

					>view:nth-child(1) {
						margin-bottom: 4rpx;
						font-size: 24rpx;
						color: #8c8c8c;

						>text {
							margin-right: 8rpx;
							font-weight: 600;
							font-size: 28rpx;
							color: #262626;
						}
					}

					>view:nth-child(2) {
						line-height: 66rpx;
						font-size: 48rpx;
						font-weight: 600;
						color: #262626;
					}
				}
			}
		}

		.header-bg {
			width: 100%;
			position: absolute;
			z-index: 1;
			left: 0;
			top: 0;
		}
	}

	.notListPop {
		width: 80vw;
		padding: 0 30rpx;
		box-sizing: border-box;

		.title {
			margin-bottom: 24rpx;
			padding: 24rpx 0;
			font-size: 32rpx;
			color: #262626;
			font-weight: bold;
			text-align: center;
		}

		.item {
			display: flex;
			align-items: center;
			margin-bottom: 24rpx;
			border-radius: 20rpx;
		}

		.img {
			width: 176rpx;
			height: 176rpx;

			image {
				display: block;
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
			}
		}

		.txt {
			margin-left: 26rpx;
			flex: 1;
			overflow: hidden;
		}

		.name {
			font-size: 28rpx;
			font-weight: bold;
			color: #262626;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.sku {
			font-size: 22rpx;
			color: #8c8c8c;
		}

		.itemFd {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 8rpx 0;

			.price {
				color: #f0250e;
				font-size: 20rpx;

				text {
					font-size: 34rpx;
				}
			}

			.num {
				font-size: 24rpx;
				color: #262626;
			}
		}

		.error {
			font-size: 26rpx;
			color: #f0250e;
		}

		.btn {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 48rpx 20rpx;

			view {
				width: 230rpx;
				height: 76rpx;
				line-height: 76rpx;
				text-align: center;
				border: 2rpx solid #999999;
				border-radius: 32px;
				font-size: 32rpx;
				color: #262626;

				&.on {
					background: #f0250e;
					border-color: #f0250e;
					color: #fff;
				}
			}
		}
	}

	::v-deep {
		checkbox .wx-checkbox-input {
			border-radius: 50% !important;
			color: #ffffff !important;
			transform: scale(0.7);
		}

		checkbox .wx-checkbox-input.wx-checkbox-input-checked {
			color: #fff;
			background: #f0250e;
			border-color: #f0250e !important;
		}
	}

	.nav {
		position: sticky;
		left: 0;
		top: 0;
		width: 100%;
		z-index: 9;
		// padding: 0 32rpx;
		transition: 0.3s all;

		.nav-head {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 44px;
		}

		.goback {
			position: absolute;
			left: 0;
			top: 0;
			bottom: 0;
			display: flex;
			align-items: center;
			padding: 0 32rpx;

			image{
				display: block;
				width: 19rpx;
				filter: brightness(10%);
			}
		}

		.title {
			font-size: 36rpx;
			font-weight: bold;
			color: #1d1d1d;
		}
	}

	// 以下是新写的
	.content {
		position: relative;
		z-index: 2;
		padding: 0 24rpx;
	}

	.content-header {
		display: flex;
		align-items: center;
		padding: 20rpx 0;

		image {
			width: 74rpx;
			height: 74rpx;
			border-radius: 32px;
		}

		.name {
			margin-left: 20rpx;
			flex: 1;
			overflow: hidden;
			font-size: 30rpx;
			color: #262626;
			font-weight: bold;
		}
	}

	.content-info {
		.hd {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 24rpx;
			height: 80rpx;
			background: #f0250e;
			border-radius: 24rpx 24rpx 0 0;

			.let {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				color: #fff;
			}

			.rig {
				display: flex;
				align-items: center;
				padding: 0 14rpx;
				height: 40rpx;
				border-radius: 32px;
				background: rgba(0, 0, 0, 0.1);
				color: #fff;

				.test {
					padding: 0 6rpx;
					font-size: 20rpx;
				}

				.icon-discounts-fill {
					font-size: 40rpx;
				}

				.icon-arrow-down-filling {
					font-size: 20rpx;
					transform: rotate(-90deg);
				}
			}
		}

		.bd {
			padding: 0 8rpx 8rpx;
			box-sizing: border-box;
			background: linear-gradient(180deg, #f0250e 0%, #ffb7af 100%);
			border-radius: 0rpx 0rpx 24rpx 24rpx;

			.bd-con {
				border-radius: 20rpx;
				background: #fff;
				overflow: hidden;
			}

			.list {
				display: flex;
				padding: 40rpx 30rpx;

				.item {
					width: 33.33%;
				}

				.tit {
					font-size: 24rpx;
					color: #262626;
				}

				.price {
					padding-top: 5rpx;
					font-size: 34rpx;
					font-weight: bold;
				}
			}

			.line {
				width: 2rpx;
				height: 36rpx;
				background: #e5e5e5;
			}

			.numList {
				display: flex;
				padding: 0 30rpx;

				.item {
					flex: 1;
					display: flex;
				}

				.line {
					margin: 0 30rpx;
				}

				image {
					width: 48rpx;
					height: 48rpx;
					border-radius: 32px;
				}

				.con {
					margin-left: 20rpx;
					font-size: 24rpx;

					.tit {
						color: 262626;
					}

					.num {
						color: #8c8c8c;
					}
				}
			}

			.btn {
				display: flex;
				align-items: center;
				margin: 56rpx 30rpx 30rpx;
				height: 80rpx;
				background: #f0250e;
				border-radius: 32px;

				.line {
					background: rgba(255, 255, 255, 0.5);
				}

				.item {
					flex: 1;
					overflow: hidden;
					text-align: center;
					font-size: 28rpx;
					color: #fff;
				}
			}
		}
	}

	.order {
		.list {
			display: flex;
			flex-wrap: wrap;
		}

		.item {
			margin: 24rpx 0 0 0;
			width: 50%;
		}

		.subtit {
			display: flex;
			align-items: center;
			color: #262626;
			font-size: 28rpx;

			text {
				color: #8c8c8c;
			}

			.iconfont {
				font-size: 24rpx;
			}
		}

		.num {
			font-size: 36rpx;
			font-weight: bold;
			color: #262626;
		}
	}

	.daiban {
		.hd {
			display: flex;
			align-items: center;
			padding: 0 24rpx;
			height: 90rpx;
			background: linear-gradient(277deg, #ffffff 0%, #fde7e7 100%);
			border-radius: 20rpx 20rpx 0 0;

			.m-tit image {
				position: relative;
				top: 6rpx;
				margin-right: 14rpx;
				width: 28rpx;
			}
		}

		.bd {
			border-radius: 0 0 20rpx 20rpx;

			.item {
				display: flex;
				align-items: center;
			}

			.m-tit {
				padding-bottom: 5rpx;
				font-size: 26rpx;
			}

			.des {
				font-size: 22rpx;
				color: #8c8c8c;
			}

			.let {
				flex: 1;
				overflow: hidden;
			}

			.rig {
				margin-left: 10rpx;
			}

			.btn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 136rpx;
				height: 52rpx;
				background: #f0250e;
				border-radius: 40rpx;
				color: #fff;
				font-size: 24rpx;
			}
		}
	}

	.mt {
		margin-top: 24rpx;
	}

	.m-box {
		background: #fff;
		padding: 24rpx;
		border-radius: 20rpx;
	}

	.m-tit {
		font-size: 30rpx;
		font-weight: bold;
		color: #262626;
	}
</style>